{include file="public/layout" /}
<script type="text/javascript" src="__SKIN__/js/clipboard.min.js"></script>
<body class="bodystyle" style="overflow-y: scroll; cursor: default; -moz-user-select: inherit;">
<div id="append_parent"></div>
<div id="ajaxwaitid"></div>
<div class="page" style="min-width: auto;">
    {include file="system/bar" /}
    <div class="flexigrid">
        <div class="mDiv">
            <div class="ftitle">
                {eq name="'Links@index'|is_check_access" value="1"}
                <div class="sDiv">
                    <div class="fbutton" style="float: none;">
                        <a href="javascript:void(0);" data-closereload="1" data-href="{:url('System/config_type', ['newframe'=>1])}" onclick="openFullframe(this, '分组管理');">
                            <div class="adds">
                                <span>分组管理</span>
                            </div>
                        </a>
                    </div>
                </div>
                {/eq}
            </div>
            <form class="navbar-form form-inline" id="searchForm" action="{:U('System/customvar_index')}" method="get" onsubmit="layer_loading('正在处理');">
                {$searchform.hidden|default=''}
                <div class="sDiv">
                    <div class="sDiv2">
                        <select name="type_id" class="select" style="margin:0px 5px;">
                            <option value="">--全部--</option>
                            {volist name="config_type" id="vo"}
                            <option value="{$vo.id}" {eq name="$Request.param.type_id" value="$vo.id"}selected{/eq}>{$vo.type_name}</option>
                            {/volist}
                        </select>
                    </div>
                    <div class="sDiv2">
                        <input type="text" size="30" name="keywords" value="{$Request.param.keywords}" class="qsbox" placeholder="搜索相关数据...">
                        <input type="submit" class="btn" value="搜索">
                        <i class="iconfont e-sousuo"></i>
                    </div>
                </div>
            </form>
        </div>
        <div class="hDiv">
            <div class="hDivBox">
                <table cellspacing="0" cellpadding="0" style="width: 100%">
                    <thead>
                    <tr>
                        <th class="sign w20 none" axis="col0">
                            <div class="tc"></div>
                        </th>
                        <th abbr="article_time" axis="col4" class="w250">
                            <div class="tl pl10">变量名称</div>
                        </th>
                        <th abbr="ac_id" axis="col4" class="w150">
                            <div class="tc">表单类型</div>
                        </th>
                        <th abbr="ac_id" axis="col4">
                            <div style="padding-left: 15px;">变量值</div>
                        </th>
                        <th abbr="ac_id" axis="col4" class="w150">
                            <div class="tc">分组</div>
                        </th>
                        <th axis="col1" class="w150">
                            <div class="tc">操作</div>
                        </th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
        <div class="bDiv" style="height: auto; min-height: auto;">
            <form id="PostForm">
                <div id="flexigrid" cellpadding="0" cellspacing="0" border="0">
                    <table style="width: 100%">
                        <tbody id="tbody">
                        {empty name="list"}
                            <tr>
                                <td class="no-data" align="center" axis="col0" colspan="50">
                                    <i class="fa fa-exclamation-circle"></i>没有符合条件的数据
                                </td>
                            </tr>
                        {else/}
                            {foreach name="list" item="vo" key="k" }
                            <tr class="tr" id="tr_{$k}">
                                <td class="sign none">
                                    <div class="w20 tc">
                                        <input type="hidden" name="attr_id[]" value="{$vo.attr_id}">
                                        <input type="hidden" name="attr_var_name[]" value="{$vo.attr_var_name}">
                                    </div>
                                </td>
                                <td>
                                    <div class="w250 tl">
                                        <span class="pl10">
                                            <span class="span_showhide span_attr_name">{$vo.attr_name}</span>
                                            <input type="text" name="attr_name[]" value="{$vo.attr_name}" class="w200 input_showhide" style="display: none;">
                                        </span>
                                    </div>
                                </td>
                                <td>
                                    <div class="w150 tc">
                                        {eq name="$vo.attr_input_type" value="4"}
                                            <span title="不允许更改">开关类型</span>
                                            <input type="hidden" name="attr_input_type[]" value="{$vo.attr_input_type}" class="w200">
                                        {else /}
                                            <span class="span_showhide span_attr_input_type">
                                                {if condition="$vo['attr_input_type'] == 2"}
                                                    多行文本
                                                {elseif condition="$vo['attr_input_type'] == 3" /}
                                                    上传图片
                                                {else /}
                                                    单行文本
                                                {/if}
                                            </span>
                                            <select name="attr_input_type[]" class="input_showhide none" onchange="change_attr_input_type(this);">
                                                <option value="0" {eq name="$vo.attr_input_type" value="0"}selected{/eq}>单行文本</option>
                                                <option value="2" {eq name="$vo.attr_input_type" value="2"}selected{/eq}>多行文本</option>
                                                <option value="3" {eq name="$vo.attr_input_type" value="3"}selected{/eq}>上传图片</option>
                                                <!-- <option value="4" {eq name="$vo.attr_input_type" value="4"}selected{/eq}>开关类型</option> -->
                                            </select>
                                        {/eq}
                                    </div>
                                </td>
                                <td style="width: 100%">
                                    <div style="padding-left: 15px;" class="ncap-form-default">
                                        <span class="span_showhide span_attr_value">
                                            {if condition="4 == $vo['attr_input_type']"}
                                                {notempty name='$vo.value'}
                                                    开启
                                                {else /}
                                                    关闭
                                                {/notempty}
                                            {elseif condition="3 == $vo['attr_input_type']"}
                                                <img src="{$vo.value|get_default_pic=###}" height="50">
                                            {else /}
                                                {$vo.value|default=''}
                                            {/if}
                                        </span>

                                        {switch name="$vo['attr_input_type']" }
                                            {case value="1"}

                                            {/case}
                                            {case value="2"}
                                                <textarea rows="5" cols="60" name="attr_value[]" style="height:36px;" class="input_showhide none">{$vo.value|default=''}</textarea>
                                            {/case}
                                            {case value="3"}
                                                <span class="input-file-show input_showhide" style="display: none;">
                                                    <span class="show">
                                                        <a id="img_a_{$vo['attr_var_name']}" class="nyroModal" rel="gal" href="{$vo.value|default='javascript:void(0);'}" target="_blank">
                                                            <i id="img_i_{$vo['attr_var_name']}" class="fa fa-picture-o" {notempty name="$vo.value"}onmouseover="layer_tips=layer.tips('<img src={$vo.value|default=''} class=\'layer_tips_img\'>',this,{tips: [1, '#fff']});"{/notempty} onmouseout="layer.close(layer_tips);"></i>
                                                        </a>
                                                    </span>
                                                    <span class="type-file-box">
                                                        <input type="text" id="{$vo['attr_var_name']}" name="attr_value[]" value="{$vo.value|default=''}" class="type-file-text" autocomplete="off">
                                                        <input type="button" name="button" id="button1" value="选择上传..." class="type-file-button">
                                                        <input class="type-file-file" onClick="GetUploadify(1,'','allimg','{$vo['attr_var_name']}_img_call_back')" size="30" hidefocus="true" nc_type="change_site_logo" title="点击前方预览图可查看大图，点击按钮选择文件并提交表单后上传生效">
                                                    </span>
                                                </span>
                                                <script type="text/javascript">
                                                    function {$vo['attr_var_name']}_img_call_back(fileurl_tmp)
                                                    {
                                                        $("#{$vo['attr_var_name']}").val(fileurl_tmp);
                                                        $("#img_a_{$vo['attr_var_name']}").attr('href', fileurl_tmp);
                                                        $("#img_i_{$vo['attr_var_name']}").attr('onmouseover', "layer_tips=layer.tips('<img src="+fileurl_tmp+" class=\\'layer_tips_img\\'>',this,{tips: [1, '#fff']});");
                                                    }
                                                </script>
                                            {/case}
                                            {case value="4"}
                                                <div class="onoff input_showhide" style="display: none;">
                                                    <label for="{$vo['attr_var_name']}1" class="cb-enable {if condition='!empty($vo.value)'}selected{/if}">开启</label>
                                                    <label for="{$vo['attr_var_name']}0" class="cb-disable {if condition='empty($vo.value)'}selected{/if}">关闭</label>
                                                    <input id="{$vo['attr_var_name']}1" onclick="attr_switch(this);" value="1" type="radio" {if condition="!empty($vo.value)"} checked="checked"{/if}>
                                                    <input id="{$vo['attr_var_name']}0" onclick="attr_switch(this);" value="0" type="radio" {if condition="empty($vo.value)"} checked="checked"{/if}>
                                                    <input type="hidden" name="attr_value[]" value="{$vo.value|default='0'}" class="input-txt">
                                                </div>
                                            {/case}
                                            {default /}
                                                <input type="text" name="attr_value[]" value="{$vo.value|default=''}" class="input_showhide input-txt" style="display: none;">
                                        {/switch}
                                    </div>
                                </td>
                                <td>
                                    <div class="w150 tc">
                                        <span class="pl10">
                                            <span class="span_showhide span_attr_type_id">{$vo.type_name}</span>
                                            <select name="attr_type_id[]" class="input_showhide none">
                                                {volist name="config_type" id="type"}
                                                     <option value="{$type.id}" {eq name="$vo.type_id" value="$type.id"}selected{/eq}>{$type.type_name}</option>
                                                {/volist}
                                            </select>
                                        </span>
                                    </div>
                                </td>
                                <td class="">
                                    <div class="w150 tl">
                                        {eq name="'System@customvar_save'|is_check_access" value="1"}
                                            <a class="btn blue" href="javascript:void(0);" onClick="customvar_edit(this);">编辑</a>
                                        {/eq}
                                        {eq name="'System@customvar_del'|is_check_access" value="1"}
                                            <a class="btn red" href="javascript:void(0);" data-id="{$vo.id}" onClick="customvar_del(this);" {eq name='$recycle_switch' value='1'} data-deltype="del" {else /} data-deltype="pseudo" {/eq}>删除</a>
                                        {/eq}
                                        <a class="btn blue {$vo['attr_var_name']}" href="javascript:void(0);" onclick="showtext('{$vo['attr_var_name']}');" data-clipboard-text="{{php} echo 'eyou:global name=\'';{/php}{$vo['attr_var_name']}{php} echo '\' /';{/php}}">标签调用</a>
                                    </div>
                                </td>
                            </tr>
                            {/foreach}
                        {/empty}
                        </tbody>
                    </table>
                </div>
            </form>
            <div class="iDiv" style="display: none;"></div>
        </div>
        <div class="tDiv">
            <div class="tDiv2">
                <div class="fbutton">
                    <a href="javascript:void(0);" onclick="customvar_add();">
                        <div class="add" title="新增变量">
                            <span class="red"><i class="fa fa-plus"></i>新增变量</span>
                        </div>
                    </a>
                </div>
                <div class="fbutton">
                    <a href="javascript:void(0);" onclick="customvar_save(this);">
                        <div class="add" title="保存">
                            <span class=""><i class="fa fa-save"></i>保存</span>
                        </div>
                    </a>
                </div>
                {include file="public/page" /}
            </div>
            <div style="clear:both"></div>
        </div>
        <!--分页位置-->
    </div>
</div>
<script type="text/javascript">
    $('#searchForm select[name=type_id]').change(function(){
        $('#searchForm').submit();
    });
    var config_type_list = {$config_type|json_encode};
    var attr_input_type_list = {$attr_input_type|json_encode};
    $(document).ready(function(){
        // 表格行点击选中切换
        $('#flexigrid > table>tbody >tr').click(function(){
            $(this).toggleClass('trSelected');
        });

        // 点击刷新数据
        $('.fa-refresh').click(function(){
            location.href = location.href;
        });
    });
    
    function showtext(classname){
        var clipboard1 = new Clipboard("."+classname);clipboard1.on("success", function(e) {layer.msg("复制成功");});clipboard1.on("error", function(e) {layer.msg("复制失败！请手动复制", {icon:5});}); 
    }

    // tr数,取唯一标识
    var tr_id = $('#tbody tr').length;
    function customvar_add(){
        var html = '';
        html += '<tr class="tr" id="tr_'+tr_id+'">';
        html += '    <td class="sign none">';
        html += '      <div class="w20 tc"> ';
        html += '      </div>';
        html += '    </td>';
        html += '    <td>';
        html += '      <div class="w250 tl"> ';
        html += '        <span class="pl10">';
        html += '          <input type="text" name="attr_name[]" value="" class="w200 input_showhide">';
        html += '        </span>';
        html += '      </div>';
        html += '    </td>';
        html += '    <td>';
        html += '      <div class="w150 tc">';
        html += '        <select name="attr_input_type[]" class="input_showhide" onchange="change_attr_input_type(this);">';
        for(var i in attr_input_type_list){
            html += '            <option value="'+i+'">'+attr_input_type_list[i]+'</option>';
        }
        html += '        </select>';
        html += '      </div>';
        html += '    </td>';
        html += '    <td style="width: 100%">';
        html += '      <div style="padding-left: 15px;" class="ncap-form-default">';
        html += '        <input type="text" name="attr_value[]" value="" class="input_showhide input-txt">';
        html += '      </div>';
        html += '    </td>';
        html += '    <td>';
        html += '      <div class="w150 tc">';
        html += '        <select name="attr_type_id[]" class="input_showhide">';
        for(var i in config_type_list){
            html += '            <option value="'+config_type_list[i].id+'">'+config_type_list[i].type_name+'</option>';
        }
        html += '        </select>';
        html += '      </div>';
        html += '    </td>';
        html += '    <td class="">';
        html += '       <div class="w150 tl">';
        html += '          <a class="btn grey" href="javascript:void(0);">编辑</a>';
        html += '          <a href="javascript:void(0);" class="btn red" onclick="$(\'#tr_'+tr_id+'\').remove();"><i class="fa fa-trash-o"></i>删除</a> ';
        html += '          <a class="btn grey" href="javascript:void(0);">标签调用</a>';
        html += '       </div>';
        html += '    </td>';
        html += '</tr>';

        if ($('input[name*=attr_name]').length == 0) {
            $('#tbody').html(html);
        } else {
            $('#tbody').append(html);
        }
        tr_id += 1;
    }

    function change_attr_input_type(obj)
    {
        var html = '';
        var attr_input_type = $(obj).val();
        var trObj = $(obj).parent().parent().parent();
        var tr_id = trObj.attr('id');
        if (2 == attr_input_type) {
            html += '<textarea rows="5" cols="60" name="attr_value[]" style="height:36px;" class="input_showhide"></textarea>';
        } else if (3 == attr_input_type) {
            html += '<span class="input-file-show input_showhide">';
            html += '    <span class="show">';
            html += '        <a id="img_a_'+tr_id+'" class="nyroModal" rel="gal" href="javascript:void(0);" target="_blank">';
            html += '            <i id="img_i_'+tr_id+'" class="fa fa-picture-o" onmouseover="" onmouseout="layer.close(layer_tips);"></i>';
            html += '        </a>';
            html += '    </span>';
            html += '    <span class="type-file-box">';
            html += '        <input type="text" id="web_attr_'+tr_id+'" name="attr_value[]" value="" class="type-file-text" autocomplete="off">';
            html += '        <input type="button" name="button" id="button1" value="选择上传..." class="type-file-button">';
            html += '        <input class="type-file-file" onClick="GetUploadify(1,\'\',\'allimg\',\''+tr_id+'_img_call_back\')" size="30" hidefocus="true" nc_type="change_site_logo" title="点击前方预览图可查看大图，点击按钮选择文件并提交表单后上传生效">';
            html += '    </span>';
            html += '</span>';

            html += '<script type="text/javascript">';
            html += '    function '+tr_id+'_img_call_back(fileurl_tmp)';
            html += '    {';
            html += '        $("#web_attr_'+tr_id+'").val(fileurl_tmp);';
            html += '        $("#img_a_'+tr_id+'").attr("href", fileurl_tmp);';
            html += '        $("#img_i_'+tr_id+'").attr("onmouseover", "layer_tips=layer.tips(\'<img src="+fileurl_tmp+" class=\\\\\\\'layer_tips_img\\\\\\\'>\',this,{tips: [1, \'#fff\']});");';
            html += '    }';
            html += '<\/script>';
        } else if (4 == attr_input_type) {
            html += '<div class="onoff input_showhide">';
            html += '    <label for="'+tr_id+'_1" class="cb-enable">开启</label>';
            html += '    <label for="'+tr_id+'_0" class="cb-disable selected">关闭</label>';
            html += '    <input id="'+tr_id+'_1" onclick="attr_switch(this);" value="1" type="radio">';
            html += '    <input id="'+tr_id+'_0" onclick="attr_switch(this);" value="0" type="radio" checked="checked">';
            html += '    <input type="hidden" name="attr_value[]" value="0" class="input-txt">';
            html += '</div>';
        } else {
            html += '<input type="text" name="attr_value[]" value="" class="input_showhide input-txt">';
        }
        trObj.find('.ncap-form-default').html(html);
    }
    
    function attr_switch(obj)
    {
        var attr_value = $(obj).val();
        $(obj).parent().find("input[name='attr_value[]']").val(attr_value);
    }

    function customvar_edit(obj)
    {
        var trObj = $(obj).parent().parent().parent();
        trObj.find('.input_showhide').show();
        trObj.find('.span_showhide').hide();
        $(obj).removeAttr('onclick').unbind('click').click(function(){customvar_save_one(this);}).css("color","red").html("保存");
    }
    //提交保存单条
    function customvar_save_one(obj){
        var trObj = $(obj).parent().parent().parent();
        var attr_id =  trObj.find(('input[name*=attr_id]')).val();
        var attr_var_name = trObj.find(('input[name*=attr_var_name]')).val();
        var attr_name = trObj.find(('input[name*=attr_name]')).val();
        var attr_input_type = trObj.find(('select[name*=attr_input_type]')).val();
        if (attr_input_type === undefined){     //开关类型
            var attr_input_type = trObj.find(('input[name*=attr_input_type]')).val();
        }
        var attr_value = trObj.find(('[name*=attr_value]')).val();
        var attr_type_id = trObj.find(('select[name*=attr_type_id]')).val();
        if (attr_name === '') {
            layer.alert('变量名称不能为空！', {
                shade: layer_shade,
                area: ['480px', '190px'],
                move: false,
                title: '提示',
                btnAlign:'r',
                closeBtn: 3,
                success: function () {
                      $(".layui-layer-content").css('text-align', 'left');
                  }
            });
            return false;
        }
        layer_loading('正在处理');
        $.ajax({
            type : 'post',
            url : "{:url('System/customvar_save_one')}",
            data : {attr_id:attr_id,attr_var_name:attr_var_name,attr_name:attr_name,attr_input_type:attr_input_type,attr_value:attr_value,type_id:attr_type_id,_ajax:1},
            dataType : 'json',
            success : function(res){
                layer.closeAll();
                if(res.code == 1){
                    layer.msg(res.msg, {shade: 0.1, time: 1000}, function(){
//                        window.location.reload();
                    });
                    trObj.find(".span_attr_name").html(attr_name);
                    trObj.find(".span_attr_input_type").html(attr_input_type_list[attr_input_type]);
                    trObj.find(".span_attr_value").html(res.data.attr_value);  //返回正确的值
                    trObj.find(".span_attr_type_id").html(config_type_list[attr_type_id].type_name);
                    trObj.find('.input_showhide').hide();
                    trObj.find('.span_showhide').show();
                    $(obj).removeAttr('onclick').unbind('click').click(function(){customvar_edit(this);}).css("color","#3478bc").html("编辑");
                }else{
                    showErrorAlert(res.msg);
                }
            },
            error: function(e){
                layer.closeAll();
                showErrorAlert(e.responseText);
            }
        });
    }
    // 提交保存全部
    function customvar_save(obj){

        if ($('input[name*=attr_name]').length == 0) {
            layer.alert('至少新增一个自定义变量！', {
                shade: layer_shade,
                area: ['480px', '190px'],
                move: false,
                title: '提示',
                btnAlign:'r',
                closeBtn: 3,
                success: function () {
                      $(".layui-layer-content").css('text-align', 'left');
                  }
            });
            return false;
        } else {
            var is_empty = true;
            $('input[name*=attr_name]').each(function(index, item){
                if ($.trim($(item).val()) != '') {
                    is_empty = false;
                    return false;
                }
            });
            if (true == is_empty) {
                layer.alert('变量名称不能为空！', {
                    shade: layer_shade,
                    area: ['480px', '190px'],
                    move: false,
                    title: '提示',
                    btnAlign:'r',
                    closeBtn: 3,
                    success: function () {
                          $(".layui-layer-content").css('text-align', 'left');
                      }
                });
                return false;
            }
        }
        var url = "{:url('System/customvar_save', ['_ajax'=>1])}";
        layer_loading('正在处理');
        $.ajax({
            type : 'post',
            url : url,
            data : $('#PostForm').serialize(),
            dataType : 'json',
            success : function(res){
                layer.closeAll();
                if(res.code == 1){
                    layer.msg(res.msg, {icon: 6, time: 1000}, function(){
                        // parent.gourl(res.url);
                        window.location.href = res.url;
                    });
                }else{
                    showErrorMsg(res.msg);
                }
            },
            error: function(e){
                layer.closeAll();
                showErrorAlert(e.responseText);
            }
        });
    }

    function customvar_del(obj) {
        var deltype = $(obj).attr('data-deltype');
        var confirm_title = '确认删除至回收站？';
        if ('del' == deltype){
            confirm_title = '确认删除？';
        }
        layer.confirm(confirm_title, {
                shade: layer_shade,
                area: ['480px', '190px'],
                move: false,
                title: '提示',
                btnAlign:'r',
                closeBtn: 3,
                btn: ['确定', '取消'] ,//按钮
                success: function () {
                      $(".layui-layer-content").css('text-align', 'left');
                  }
            }, function(){
                // 确定
                layer_loading('正在处理');
                $.ajax({
                    type : 'post',
                    url : "{:url('System/customvar_del')}",
                    data : {del_id:$(obj).attr('data-id'),deltype:deltype,_ajax:1},
                    dataType : 'json',
                    success : function(data){
                        layer.closeAll();
                        if(data.code == 1){
                            layer.msg(data.msg, {icon: 6});
                            window.location.reload();
                            // $('#dl_'+$(obj).attr('data-attr_var_name')).remove();
                        }else{
                            layer.msg(data.msg, {icon: 5,time: 2000});
                        }
                    }
                });
            }, function(index){
                layer.close(index);
                return false;// 取消
            }
        );
    }

</script>

{include file="public/footer" /}